<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>完善信息</title>
		<link rel="stylesheet" href="css/cropper.min.css" />
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/adaptation.js"></script>
	</head>
	<body>
		<div id="wrap">
			<div id="perfect">
				<div class="header">
					<div class="des">
						<div class="p1">
							<span class="txt-ws title"></span>
						</div>
						<div class="p2">
							<span class="txt-join"></span>
							<span>【东海小鸡鸡】</span>
							<span class="txt-dorm"></span>
						</div>
					</div>
					
					<!--<div class="des">
						<div class="p1">
							<span class="txt-ws-2 title"></span>
							<span>大哥大</span>
						</div>
						<div class="p2">
							<span class="txt-created"></span>
							<span>【东海小鸡鸡】</span>
							<span class="txt-dorm"></span>
						</div>
					</div>-->
				</div>
				<div class="txt-info"></div>
				
				<div class="edit-box">
					<input type="hidden" name="upload_path" id="upload_path"/>
					<input type="hidden" name="upload_url" id="upload_url"/>
					<input type="hidden" name="cropperimg" id="cropperimg"/>
					<div class="content">
						<div class="ui-camera-box-2 upload">
							<p><i class="ui-camera"></i><br />请上传个人照片</p>
							<div class="img-box">
								<img src="" alt="" id="resultimg"/>
							</div>
						</div>
						
						<div class="ui-field">
							<div class="item">
								<input type="text" placeholder="更换昵称(可选)" name="nickname" id="nickname"/>
							</div>
							<div class="item">
								<input type="text" placeholder="微信号(必填)" name="wx" id="wx"/>
							</div>
							<p>*信息不可更改，请慎重填写 </p>
						</div>
					</div>
				</div>
				
				<!--标签-->
				<div class="txt-tag"></div>
				<div class="tags">
					<span class="w150">单身待解放</span>
					<span class="w150">外贸协会</span>
					<span class="w100">宅</span>
					<span class="w100">二次元</span>
					<span class="w150">减肥中</span>
					<span class="w100">学渣</span>
					<span class="w200">不看电影会死</span>
					<span class="w200">晚睡强迫症</span>
					<span class="w200">伪文青小清新</span>
					<span class="w100">迷妹</span>
					<span class="w150">美剧控</span>
					<span class="w100">学霸</span>
					<span class="w150">偏执狂</span>
					<span class="w150">驴友党</span>
					<span class="w150">求约炮</span>
				</div>
				
				<div class="btn-group">
					<a href="javascript:void(0);" class="ui-submit" id="subForm"></a>
				</div>
			</div>
		</div>
		<div style="display: none;">
			<!-- 照片裁剪框 -->
            <div id="cropperBox" class="angleBg">
                <div class="title">裁剪照片</div>
                <div class="container">
                    <img id="readyimg" src="" alt="" class="readyimg">
                </div>
                <a href="javascript:void(0);" class="sure"></a>
            </div>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/cropper.min.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/common.js"></script>
		<script>
			$(function(){
				
				//选择标签
				$(".tags span").click(function(){
					$(this).toggleClass("selected");
					var items = $(".tags .selected");
					if(items.length>5){
						$(this).toggleClass("selected");
						remind("最多能选5个标签");
						return;
					}
				});
				
				var image;
				
				//提交数据
				$("#subForm").click(function(){
					var upload_path = $("#upload_path").val();
					var upload_url  = $("input[name=upload_url]").val();
					var nickname = $("#nickname").val();
					var wx = $("#wx").val();
					if(upload_path==""){
						remind("请上传个人照片");
						return;
					}
					if($.trim(wx)==""){
						remind("请填写微信号");
						return;
					}
					if($(".tags .selected").length==0){
						remind("请选择个性标签");
						return;
					}
					var tags = [];
					$(".tags .selected").each(function(idx,item){
						tags.push($(item).text());
					});
					
					tags = tags.toString();
					
					$.ajax({
						type: "post",
						data: {img:image,upload_path:upload_path,upload_url:upload_url,nickname:nickname,wx:wx,tags:tags},
						dataType: "json",
						url: "data/perfect.json",
						success: function(data){
							remind("提交成功");
							//window.location.href="mydorm.html";
						}
					});
				});
				
				var cropper;
				
				var Upload = {
					init : function(){
						this.bindEvent();   //绑定事件
					},
					bindEvent: function(){
						var instance = this;
						$(".upload").click(function(){
							instance.uploadTest();
						});
						
						$(document).on('click','.sure',function(){
				            var result = $('.layermbox .container > img').cropper('getCroppedCanvas',{width:510,height:510,fillColor:'#FFF'}).toDataURL("image/jpeg");
				            $("#resultimg").attr('src',result);
				            image = result.replace('data:image/jpeg;base64,', '');
				            $(".img-box").show();
				            layer.closeAll();
				        });
					},
					uploadTest: function(){
						var instance = this;
						$.ajax({
			                type:"get",
			                traditional: true,
			                url:"data/upload.json",
			                dataType: "json",
			                data:{},
			                success: function(data){
			                    if(data.success==1) {
			                    	console.log(data.upload_path)
			                    	$("#upload_path").val(data.upload_path);
			                        instance.loadImage('readyimg', data.src, instance.loadResult);
			                    } else {
			                        remind(data.msg);
			                    }
			                },
			            }); 
					},
					upload: function(){
						var wechatInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i) ;
			            if(wechatInfo && wechatInfo[1] < "6.0") {
			                remind('微信版本不支持图片上传');
			                return;
			            }
			            wx.chooseImage({
			                sizeType: ['original'],
			                success: function (res) {
			                    var localIds = res.localIds;
			                    if(localIds.length>maxPicnum){
			                        remind('最多只能传1张照片');
			                        return;
			                    }
			                    
			                    var localId = localIds[0];
			                    
			                    wx.uploadImage({
			                        localId: localId,
			                        isShowProgressTips: 0,
			                        success: function(res) {
			                            var sid = res.serverId;
			                            $.ajax({
			                                type:"get",
			                                traditional: true,
			                                url:"{php echo $this->createMobileUrl('DownloadPic')}",
			                                dataType: "json",
			                                data:{sid:sid},
			                                success: function(data){
			                                    if(data.success==1) {
			                                        $("input[name=upload_url]").val(data.upload_url);
			                                        $("input[name=upload_path]").val(data.upload_path);
			                                        loadImage('readyimg', data.upload_url, loadResult);
			                                    } else {
			                                        remind(data.msg);
			                                    }      
			                                },
			                            }); 
			                        },
			                        fail: function (res) {
			                            remind('上传失败，请稍候再试~');
			                        }
			                    });
			                }
			            });
					},
					loadResult: function(data){
						data = data || {};
			            if (typeof (data.msg) != 'undefined') {
			                if(data.msg=='ok') {
			                    $("#readyimg").attr('src', data.src);
			                    if(cropper){
			                        $('.layermbox .container > img').cropper("reset")
			                    }
			
			                    layer.open({
			                        content: $("#cropperBox")[0].outerHTML,
			                        shadeClose: false,
			                        className: "cropBox",
			                        style: "background:none;min-width:600px;max-width:600px;height:800px;",
			                    });
			                    
			                    cropper = $('.layermbox .container > img').cropper({
			                        aspectRatio: 1/1,
			                        minCropBoxWidth: 570,
			                        minCropBoxHeight: 570,
			                        autoCropArea:1,
			                        guides:false,
			                        minContainerWidth:570,
			                        minContainerHeight:570,
			                        minCanvasWidth:510,
			                        minCanvasHeight:510,
			                        cropBoxResizable:false,
			                        toggleDragModeOnDblclick:false,
			                        // movable:false,
			                        rotatable:false,
			                        checkOrientation: true,
			                        crop: function(e) {
			                            //$("input[name='left']").val(e.x);
			                            //$("input[name='top']").val(e.y);
			                            //$("input[name='width']").val(e.width);
			                            //$("input[name='height']").val(e.height);
			                        }
			                    });
			                } else {
			                    remind('系统繁忙，请稍后再试！');
			                }
			            }
					},
					loadImage: function(id,src,callback){
						var imgloader = new window.Image();
				        // 当图片成功加载到浏览器缓存
				        imgloader.onload = function (evt) {
				            if (typeof (imgloader.readyState) == 'undefined') {
				                imgloader.readyState = 'undefined';
				            }
				            // 在IE8以及以下版本中需要判断readyState而不是complete
				            if ((imgloader.readyState == 'complete' || imgloader.readyState == "loaded") || imgloader.complete) {
				                callback({
				                    'msg': 'ok',
				                    'src': src,
				                    'id': id
				                });
				            } else {
				                imgloader.onreadystatechange(evt);
				            }
				        };
				        // 当加载出错或者图片不存在
				        imgloader.onerror = function (evt) {
				            callback({
				                'msg': 'error',
				                'id': id
				            });
				        }
				        // 当加载状态改变                       
				        imgloader.onreadystatechange = function (e) {
				            // 此方法只有IE8以及一下版本会调用     
				        }
				        imgloader.src = src;
					}
				}
				
				Upload.init();
			});
		</script>
	</body>
</html>
